<template>
    <el-upload class="upload-demo" 
    :show-file-list="uploadProps.showFileList"
    drag 
    :http-request="upload"
    :action="host" 
    :disabled="uploadProps.disabled"
    :on-remove ="handleRemove"
    :on-error="handleError"
    >
        <el-icon v-if="!uploadProps.disabled" class="el-icon--upload"><upload-filled /></el-icon>
        <div v-if="!uploadProps.disabled"  class="el-upload__text">
            将资源包拖曳到此处上传 或<em>点击选择资源包文件</em>
        </div>
        <el-progress v-else type="circle" :percentage="uploadProps.percentage"/>
    </el-upload>
    <h2>奇数分辨率表格</h2>
    <el-table :data="errorData" style="width: 100%" :row-class-name="tableRowClassName" v-if="Object.keys(errorData[0])!=undefined">
        <el-table-column v-for="item in Object.keys(errorData[0])" :prop="item" :label="item"></el-table-column>
    </el-table>
    <h2>识别结果表格</h2>
    <el-table :data="responseData"  height="250" style="width: 100%" v-if="Object.keys(responseData[0])!=undefined">
        <el-table-column v-for="item in Object.keys(responseData[0])" :prop="item" :label="item"></el-table-column>
    </el-table>
</template>

<script setup lang="ts">
import { UploadFilled } from '@element-plus/icons-vue'
import axios from 'axios';
import { UploadRequestOptions, UploadFile, ElMessage } from 'element-plus';
import { ref, reactive } from 'vue';
import { downloadStream } from '../utils/download';
const responseData = reactive([{}])
const errorData = reactive([{}])
const host = ref("http://localhost:9091/api/image-size-checker/upload")
const uploadProps = reactive({
    showFileList: true,
    disabled: false,
    percentage : 0
})
function tableRowClassName ({row,rowIndex,}) {
    return 'danger-row'
}
async function upload(options: UploadRequestOptions) {
    let params = new FormData();
    params.append("file", options.file)

    uploadProps.percentage = 25
    uploadProps.disabled = true
    const response = await axios.post("http://localhost:9091/api/image-size-checker/upload", params)
        // 从接口响应的header获取生成的文件名称（自定义的header）。
    uploadProps.percentage=80

    let filename = response.headers['resource-filename']
    // 对文件名进行解码。
    filename = decodeURIComponent(filename);
    if (filename == undefined) filename = "test.prn"
    
    downloadStream(response.data,filename,response.data.type)

    responseData.splice(0, responseData.length)
    errorData.splice(0, errorData.length)

    const lines:string[] = response.data.split("\n")
    const columnNames = lines[0].split("\t")
    lines.splice(0, 1)
    lines.forEach(line => {
        const row = new Object();
        const columns = line.split("\t")
        //responseData.push(Object.assign({}, line.split("\t")))
        for (let i = 0; i < columnNames.length; i++){
            row[columnNames[i]] = columns[i]
        }
        if (line.includes("Error")) {
            errorData.push(row)
            console.log(line)
        }
        responseData.push(row)
    });
    uploadProps.percentage = 100
    uploadProps.disabled = false
}

function handleRemove(uploadFile: UploadFile) {
    responseData.splice(0, responseData.length)
    responseData.push({})
    errorData.splice(0, errorData.length)
    errorData.push({})
}

function handleError(error: Error, uploadFile: UploadFile) {
    uploadProps.disabled = false
    ElMessage.error("提交失败"+error)
}
</script>

<style scoped>
.el-table .danger-row {
    --el-table-tr-bg-color: var(--el-color-danger-light-7);
}
.el-progress--circle {
    margin-right: 15px;
}
</style>